<template>
  <div class="channel-main">
    <div class="channel-title">
      <div class="title">航道概况</div>
      <div class="time">
        <img src="../../static/images/icon-time.png" alt="" />
        <span>{{ currentYearMonth1 }}-{{ currentYearMonth2 }}</span>
      </div>
    </div>
    <div class="unit">单位:公里（km）</div>
    <div class="item-list">
      <div class="item" style="padding-bottom: 16px">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div class="item-title">全省航道概览</div>
          <div class="icon">
            <img
              src="../../static/images/Subtract.png"
              alt=""
              @click="handleShow('first')"
            />
          </div>
        </div>

        <div class="line"></div>
        <div class="item-content-frist">
          <div class="icon">
            <img src="../../static/images/waterway-first-icon.png" alt="" />
          </div>
          <div>
            <div class="item-name">航道总里程</div>
            <div class="item-num">
              {{ totalData.totalMileageOfWaterwayInTheProvince }}
            </div>
          </div>
        </div>
        <div class="amount-content">
          <div class="amount-item">
            <div class="name">内河航道里程</div>
            <div class="num">{{ totalData.mileageOfInlandWaterway || "" }}</div>
          </div>
          <div class="line-box"></div>
          <div class="amount-item">
            <div class="name">沿海航道里程</div>
            <div class="num">{{ totalData.mileageOfCoastalWaterwayTotal || "" }}</div>
          </div>
        </div>
      </div>
      <!-- <div class="item">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div class="item-title">航道部门管辖航道概览</div>
          <div class="icon">
            <img
              src="../../static/images/Subtract.png"
              alt=""
              @click="handleShow('second')"
            />
          </div>
        </div>

        <div class="line"></div>
        <div class="item-content-n">
          <div class="top">
            <div class="little" style="width: 24%">
              <div class="name">航道总里程</div>
              <div class="num">
                {{ totalData.totalMileageOfWaterway || "" }}
              </div>
            </div>
            <div class="little">
              <div class="name">内河航道里程</div>
              <div class="num">
                {{ totalData.mileageOfInlandWaterway || "" }}
              </div>
            </div>
            <div class="little">
              <div class="name">沿海航道里程</div>
              <div class="num">
                {{ totalData.mileageOfCoastalWaterway || "" }}
              </div>
            </div>
          </div>
          <div class="bottom">
            <div class="little" style="width: 24%">
              <div class="name">维护总里程</div>
              <div class="num">{{ totalData.totalMileageForMaintenance }}</div>
            </div>
            <div class="little">
              <div class="name">内河航道维护里程</div>
              <div class="num">
                {{ totalData.mileageOfInlandWaterwayMaintenance }}
              </div>
            </div>
            <div class="little">
              <div class="name">沿海航道维护里程</div>
              <div class="num">
                {{ totalData.maintenanceMileageOfCoastalWaterway }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item" style="padding-bottom: 16px">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div class="item-title">其他部门管辖航道概览</div>
          <div class="icon">
            <img
              src="../../static/images/Subtract.png"
              alt=""
              @click="handleShow('third')"
            />
          </div>
        </div>

        <div class="line"></div>
        <div class="item-content-second">
          <div class="icon">
            <img src="../../static/images/waterway-second-icon.png" alt="" />
          </div>
          <div>
            <div class="item-name">其他部门管辖航道总里程</div>
            <div class="item-num" style="color: #165dff">
              {{ totalData.localTotalMileageOfWaterway || "" }}
            </div>
          </div>
        </div>
      </div> -->
      <div class="item">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div class="item-title">内河等级航道维护详情</div>
          <div class="icon">
            <img
              src="../../static/images/Subtract.png"
              alt=""
              @click="handleShow('fourth')"
            />
          </div>
        </div>

        <div class="line"></div>
        <div class="chart-title">各辖区内河等级航道维护里程分布图</div>
        <div class="chart" id="bar-chart"></div>
        <div class="chart-title">各辖区内河等级航道维护里程详情</div>
        <!-- <div class="table-box" style="margin-top: -10px;">
          <div class="table" style="margin: 15px; width: 500px">
            <table
              style="border-collapse: collapse;table-layout: fixed;"
              cellspacing="0"
              cellpadding="0"
            >
              <thead style="background: #f8f9fb;position: sticky;top: 0px;">
                <tr>
                  <th id="lineTd" style="width: 120px;">
                    <span
                      style="float: right; margin-top: -6px; margin-left: 12px"
                      >航道等级</span
                    >
                    <span style="float: left; margin-top: 10px">区域中心</span>
                  </th>
                  <th style="width: 80px" v-for="level in levels" :key="level">
                    {{ level }}
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="area in nhdjhdDetail" :key="area.region">
                  <td style="width: 120px;text-align:center;">
                    <strong>{{ area.region }}</strong>
                  </td>
                  <td style="width: 80px;text-align:center">
                    {{ area.total }}
                  </td>
                  <td style="width: 80px;text-align:center">
                    {{ area.v1 }}
                  </td>
                  <td style="width: 80px;text-align:center">
                    {{ area.v2 }}
                  </td>
                  <td style="width: 80px;text-align:center">
                    {{ area.v3 }}
                  </td>
                  <td style="width: 80px;text-align:center">
                    {{ area.v4 }}
                  </td>
                  <td style="width: 80px;text-align:center">
                    {{ area.v5 }}
                  </td>
                  <td style="width: 80px;text-align:center">
                    {{ area.v6 }}
                  </td>
                  <td style="width: 80px;text-align:center">
                    {{ area.v7 }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div> -->
        <div style="display: flex;justify-content: end;">单位:公里（km）</div>
        <div class="myTable">          
          <table cellspacing="0" border="0" cellpadding="0">
            <thead>
              <tr>
                <th class="diagonal">
                  <span
                    style="float: right; margin-left: 12px"
                  >
                    航道等级
                  </span>
                  <span style="float: left; margin-top: 10px">区域中心</span>
                </th>
                <th>总计</th>
                <th v-for="level in levels" :key="level">
                  {{ level }}
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="area in nhdjhdDetail" :key="area.region">
                <td>
                  <strong>{{ area.region }}</strong>
                </td>
                <td>{{ area.total }}</td>
                <td>{{ area.v1 }}</td>
                <td>{{ area.v2 }}</td>
                <td>{{ area.v3 }}</td>
                <td>{{ area.v4 }}</td>
                <td>{{ area.v5 }}</td>
                <td>{{ area.v6 }}</td>
                <td>{{ area.v7 }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="item">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div class="item-title">内河等级航道电子航道图</div>
          <div class="icon">
            <img
              src="../../static/images/Subtract.png"
              alt=""
              @click="handleShow('')"
            />
          </div>
        </div>
        <div class="line"></div>
        <div class="chart-title">各区域中心的内河等级航道电子航道图覆盖情况</div>
        <div class="map">
          <OlArc></OlArc>
        </div>
      </div>
      <!-- <div class="item">
        <div class="item-title">航道检查</div>
        <div class="line"></div>
        <div class="chart-title">行政检查信息分析</div>
        <div class="staticTable">          
          <table cellspacing="0" border="0" cellpadding="0">
            <thead>
              <tr>
                <th>巡查时间</th>
                <th>巡查人员</th>
                <th>巡查航道名称</th>
                <th>单位名称</th>
                <th>航道状态</th>
                <th>巡查状态</th>
                <th>巡查结果</th>
                <th>上次巡查时间</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in channelCheckData" :key="index">
                <td>{{ item.xcsj }}</td>
                <td>{{ item.xcry }}</td>
                <td>{{ item.xchdmc }}</td>
                <td>{{ item.dwmc }}</td>
                <td>{{ item.hdzt }}</td>
                <td>{{ item.xczt }}</td>
                <td>{{ item.xcjg }}</td>
                <td>{{ item.scxcsj }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="item">
        <div class="item-title">基础数据</div>
        <div class="line"></div>
        <div class="chart-title">航道基础信息分析</div>
        <div class="staticTable">          
          <table cellspacing="0" border="0" cellpadding="0">
            <thead>
              <tr>
                <th>航道编码</th>
                <th>航道名称</th>
                <th>航道等级</th>
                <th>航道位置</th>
                <th>航道状态</th>
                <th>航道属性</th>
                <th>航道宽度</th>
                <th>航道深度</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in channelBaseData" :key="index">
                <td>{{ item.hdbm }}</td>
                <td>{{ item.hdmc }}</td>
                <td>{{ item.hddj }}</td>
                <td>{{ item.hdwz }}</td>
                <td>{{ item.hdzt }}</td>
                <td>{{ item.hdsx }}</td>
                <td>{{ item.hdkd }}</td>
                <td>{{ item.hdsd }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div> -->
    </div>
    <div class="source">
      <div class="name">广东省交通运输厅</div>
      <div class="name">数据来源：广东省航道事务中心</div>
    </div> 
    <!-- 弹窗 -->
    <van-dialog
      v-model:show="isShow"
      confirm-button-text="我知道了"
      confirm-button-color="#2D78ED"
    >
      <div v-for="(item, index) in dialogContent" :key="index">
        <div class="dialog-title">{{ item.title }}</div>
        <div class="dialog-content">{{ item.content }}</div>
      </div>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { 
  getWaterwayTotalNum, 
  getnhdjhdDetail, 
  channelCheck,
  channelBase,
} from "../../utils/apis";
import * as echarts from "echarts/core";
import {
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent,
  DataZoomComponent,
} from "echarts/components";
import { BarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import OlArc from "./olArc.vue";
import { format } from "echarts/core";
echarts.use([
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent,
  BarChart,
  CanvasRenderer,
  DataZoomComponent,
]);

const initBarChart = () => {
  let barChart = echarts.getInstanceByDom(document.getElementById("bar-chart"));
  if(barChart != null && barChart != "" && barChart != undefined){
    barChart.dispose();
  }
  barChart = echarts.init(document.getElementById('bar-chart'));
  let option;
  option = {
    tooltip: {
      // trigger: "axis",
      trigger: 'item',
      axisPointer: {
        type: "shadow",
      },
      confine: true, //限制在图表区域内
    },
    legend: {
      itemWidth: 6, // 设置图例项的宽度
      itemHeight: 6, // 设置图例项的高度
      textStyle: {
        fontSize: "12px",
        color: "rgba(0,0,0,0.85)",
      },
      itemGap: 4,
      icon: "circle", //图例设置成圆形
    },
    grid: {
      top: "20%",
      left: "5%",
      right: "60",
      bottom: "10%",
      containLabel: true,
    },
    dataZoom: [
      {
        show: false,
        type: "inside",
        // maxValueSpan: 12,
        startValue: 0,
        endValue: 9,
        zoomLock: false,
      },
    ],
    xAxis: [
      {
        type: "category",
        name: "区域中心",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "10px",
          color: "rgba(0,0,0,0.45)",
        },
        data: regionalCenter.value,
        axisTick: {
          alignWithLabel: true, //控制刻度线是否与刻度标签对齐
          show: false, //是否显示刻度线
        },
        axisLabel:{
          interval: 0,
          formatter: function (value) {
            //x轴的文字改为竖版显示
            var str = value.split("");
            return str.join("\n");
          }
        },
        axisPointer: {
          show: true,
          type: 'none',
          label: {
            show: false,
          },
        },  
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "维护里程（km）",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "10px",
          color: "rgba(0,0,0,0.45)",
        },
        // nameLocation: "center",
        nameGap: 15,
      },
    ],
    series: [
      {
        name: "一级",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        stack: "Ad",
        barWidth: 10,
        color: "#67CDF7",
        data: levelOne.value,
      },
      {
        name: "二级",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        stack: "Ad",
        barWidth: 10,
        color: "#FFCB32",
        data: levelTwo.value,
      },
      {
        name: "三级",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        stack: "Ad",
        barWidth: 20,
        color: "#F08BB4",
        data: levelThree.value,
      },
      {
        name: "四级",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        stack: "Ad",
        barWidth: 10,
        color: "#FFA257",
        data: levelFour.value,
      },
      {
        name: "五级",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        stack: "Ad",
        barWidth: 10,
        color: "#6B9BFD",
        data: levelFive.value,
      },
      {
        name: "六级",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        stack: "Ad",
        barWidth: 10,
        color: "#4ED9A0",
        data: levelSix.value,
      },
      {
        name: "七级",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        stack: "Ad",
        barWidth: 10,
        color: "#7262FD",
        data: levelSeven.value,
      },
    ],
  };

  option && barChart.setOption(option);
};
const levels = ref([
  // "总计（km）",
  "一级",
  "二级",
  "三级",
  "四级",
  "五级",
  "六级",
  "七级",
]);
// 航道数据
const totalData = ref({});
const getWaterwayTotalNumFn = () => {
  getWaterwayTotalNum().then((res) => {
    if (res.code === 200 && res.data) {
      totalData.value = res.data[0];
    }
  });
};
// 内河等级航道维护详情接口
const nhdjhdDetail = ref([]);
// 区域中心
const regionalCenter = ref([]);
const levelOne = ref([]);
const levelTwo = ref([]);
const levelThree = ref([]);
const levelFour = ref([]);
const levelFive = ref([]);
const levelSix = ref([]);
const levelSeven = ref([]);
const regionalLevelNum = ref([]);
const getnhdjhdDetailFn = () => {
  getnhdjhdDetail().then((res) => {
    if (res.code === 200 && res.data) {
      let resData = res.data;
      let obj = {};
      resData.forEach((el,index) => {
        if(el.region === "总计"){
          obj = el;
          resData.splice(index,1);
        }
        if(el.region !== "总计"){
          regionalCenter.value.push(el.region);
        }
        
        levelOne.value.push(el.v1);
        levelTwo.value.push(el.v2);
        levelThree.value.push(el.v3);
        levelFour.value.push(el.v4);
        levelFive.value.push(el.v5);
        levelSix.value.push(el.v6);
        levelSeven.value.push(el.v7);        
        el.total = el.v1 + el.v2 + el.v3 + el.v4 + el.v5 + el.v6 + el.v7;
      });
      resData.unshift(obj);
      nhdjhdDetail.value = resData;

      initBarChart();
    }
  });
};
// 弹窗
const isShow = ref(false);
const dialogContent = ref([]);
const handleShow = (val) => {
  //隐藏echarts tooltip
  let barChart = echarts.getInstanceByDom(document.getElementById("bar-chart"));
  barChart.dispatchAction({
    type: 'hideTip'
  });
  if (val === "first") {
    dialogContent.value = [
      {
        title: "全省航道总里程",
        content: "全省航道的里程数总数",
      },
      {
        title: "内河航道里程",
        content: "航道部门管辖内河航道的航道里程总数",
      },      
      {
        title: "沿海航道里程",
        content: "航道部门管辖沿海航道的航道总里程总数3956公里与其他部门管辖航道总里程数852公里之和（852公里包括广州港务局航道里程227公里+其他单位管辖航道里程625公里）"
      }
    ];
  } else if (val === "second") {
    dialogContent.value = [
      {
        title: "航道总里程",
        content: "航道部门管辖航道的里程总数",
      },
      {
        title: "内河航道里程",
        content: "航道部门管辖内河航道的航道里程总数",
      },
      {
        title: "沿海航道里程",
        content: "航道部门管辖沿海航道的航道总里程总数",
      },
      {
        title: "维护总里程",
        content:
          "航道部门管辖内河航道维护里程与沿海航道维护里程的总数（实现按区域中心、航道进行展示）",
      },
      {
        title: "内河航道维护里程",
        content: "航道部门管辖内河航道维护里程总数",
      },
      {
        title: "沿海航道维护里程",
        content: "航道部门管辖沿海航道维护里程总数",
      },
    ];
  } else if (val === "third") {
    dialogContent.value = [
      {
        title: "其他部门管辖航道总里程",
        content:
          "其他部门管辖航道总里程数852公里（包括广州港务局航道里程227公里+其他单位管辖航道里程625公里）",
      },
    ];
  } else if (val === "fourth") {
    dialogContent.value = [
      {
        title: "内河航道维护里程",
        content: "航道部门管辖内河航道维护里程总数",
      },
    ];
  } else {
    dialogContent.value = [
      {
        title: "内河等级航道电子航道图",
        content: "内河等级航道电子航道图覆盖情况（实现电子航道图按区域中心进行展示）",
      },
    ];
  }
  isShow.value = true;
};

//获取日期
const currentYearMonth1 = ref("");
const currentYearMonth2 = ref("");

//航道检查
const channelCheckData = ref([]);
const channelCheckFn = () => {
  channelCheck().then((res) => {
    if(res.code === 200 && res.data.length){
      channelCheckData.value = res.data;
    }
  });
};

//航道基础信息
const channelBaseData = ref([]);
const channelBaseFn = () => {
  channelBase().then((res) => {
    if(res.code === 200 && res.data.length){
      channelBaseData.value = res.data;
    }
  });
};

onMounted(() => {
  if(sessionStorage.getItem("watermarkTxt")){
    //加水印
    watermark.init({ 
      watermark_x: -30, // 水印起始位置x轴坐标
      watermark_y: -20, // 水印起始位置Y轴坐标
      watermark_x_space: 20, // 水印x轴间隔
      watermark_y_space: 80, // 水印y轴间隔
      watermark_alpha: 0.07, // 水印透明度
      watermark_fontsize: '14px', // 水印字体大小
      watermark_width: 100, // 水印宽度
      watermark_height: 30,
      watermark_txt: sessionStorage.getItem("watermarkTxt"), // 水印的内容
      watermark_angle: 25, // 水印倾斜度数
      watermark_rows: 0, // 水印行数
      watermark_cols: 0, // 水印列数
      watermark_font: '微软雅黑', // 水印字体
      watermark_color: 'black', // 水印字体颜色 
    });
  }

  currentYearMonth1.value = new Date().getFullYear() + ".01";
  currentYearMonth2.value = new Date().format("yyyy.MM");

  getWaterwayTotalNumFn();
  getnhdjhdDetailFn();
  // channelCheckFn();
  // channelBaseFn();
});
</script>

<style lang='scss' scoped>
.channel-main {
  overflow-x: hidden;
  background: #ececee;
  padding: 0 0 1px 0;
  .channel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px 10px 20px;
    background-color: #fff;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
    .title {
      font-size: 18px;
      font-weight: 500;
      color: #262626;
    }
    .time {
      display: flex;
      align-items: center;
      color: #8c8c8c;
      font-size: 14px;
      font-weight: 500;
      img {
        width: 18px;
        height: 18px;
        padding-right: 5px;
      }
    }
  }
  .unit {
    display: flex;
    flex-direction: row-reverse;
    padding: 8px 12px 8px 0;
    font-size: 12px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.45);
  }
  .item-list {
    padding-left: 20px;
    padding-right: 20px;
    .item {
      background: #ffffff;
      box-shadow: 0px 2px 8px 1px rgba(0, 0, 0, 0.08);
      border-radius: 8px;
      opacity: 1;
      margin-bottom: 16px;
      .icon {
        width: 16px;
        height: 16px;
        margin-right: 16px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .item-title {
        font-size: 16px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        padding: 16px 0 16px 16px;
        position: relative;
      }
      .line {
        height: 1px;
        background: #d9d9d9;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        margin-left: 16px;
        margin-right: 16px;
      }
      .item-content-frist,
      .item-content-second {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: bold;
        margin: 16px 19px 0px 16px;
        .icon {
          width: 42px;
          height: 42px;
          margin-right: 8px;
          margin-left: 16px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .item-name {
          font-size: 12px;
          font-weight: 400;
          color: #595959;
        }
        .item-num {
          font-size: 18px;
          font-weight: 800;
          color: rgba(1, 191, 142, 0.8);
        }
        .little {
          padding: 6px;
        }
      }
      .item-content-frist {
        background-image: url("../../static/images/waterway-first-icon-bottom.png");
        // width: 300px;
        height: 80px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .item-content-second {
        background-image: url("../../static/images/waterway-second-icon-bottom.png");
        // width: 300px;
        height: 80px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .amount-content{
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        margin: 0 16px;
        .amount-item{
          margin-top: 16px;
          .name{
            font-size: 14px;
            font-weight: 500;
            color: #8C8C8C;
          }
          .num{
            font-size: 21px;
            font-weight: 500;
            color: #595959;
            margin-top: 8px;
            text-align: center;
          }
        }
        .line-box{
          border-left: 1px solid #D9D9D9;
          width: 1px;
          height: 45px;
          margin: 16px 16px 0px 16px;
        }       
      }
      .item-content-n {
        font-size: 14px;
        font-weight: bold;
        padding: 16px;
        .top,
        .bottom {
          display: flex;
          justify-content: space-around;
          align-items: center;
          .little {
            width: 35%;
            display: flex;
            flex-direction: column;
            align-items: center;
            .name {
              font-size: 12px;
              font-weight: 400;
              color: #595959;
              margin-bottom: 4px;
            }
            .num {
              font-size: 18px;
              font-weight: 500;
              color: #262626;
            }
          }
        }
        .top {
          margin-bottom: 16px;
        }
      }
      .chart-title {
        margin-top: 16px;
        margin-left: 24px;
        font-size: 14px;
        font-weight: 500;
        color: #262626;
        position: relative;
        margin-bottom: 12px;
      }
      .chart-title::before {
        content: "";
        background-color: #2d78ed;
        position: absolute;
        top: 50%;
        left: -8px;
        height: 12px;
        width: 2px;
        transform: translateY(-50%);
      }
      .chart {
        height: 260px;
        margin: 10px 0;
      }
      .table-box {
        // width: 320px;
        height: 200px;
        overflow: scroll;
        scrollbar-width: none;
        scrollbar-color: transparent;
        -ms-overflow-style: none;
        .table {
          border: 1px solid #d9d9d9;
          #lineTd {
            position: relative;
          }
          #lineTd::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 50%;
            border-top: 1px solid #595959;
            // width: 100px;
            width: 110%;
            transform: translateX(-50%) rotate(-150deg);
          }
          th,
          td {
            padding: 2px;
            border: 1px solid #d9d9d9;
            color: #595959;
          }
          .tbody {
            height: 100px; /* 设置表格体容器的高度 */
            overflow-y: auto; /* 启用垂直滚动条 */
            // width: 315px;
            width: 100%;
            overflow-x: auto;
          }          
        }
      }
      .table-box::-webkit-scrollbar {
        width: 0;
        height: 0;
        background-color: transparent;
      }
      .table-box::-webkit-scrollbar-thumb {
        background-color: transparent;
      }
      .map {
        height: 350px;
        padding-bottom: 16px;
      }
      .myTable{
        overflow: auto;
        // width:400px;
        height: 200px; /* 固定高度 */
        border: 1px solid #d9d9d9;
        border-bottom: 0;
        border-right: 0;
        margin: 10px;
        table {
          border-collapse: separate;
          table-layout: fixed;
          width: 100%; /* 固定寬度 */      
          color: #595959;
        }
        td, th {
          border-right: 1px solid #d9d9d9;
          border-bottom: 1px solid #d9d9d9;
          box-sizing: border-box;
          /* 单元格宽高 */
          width: 65px;
          height: 20px;
          text-align: center;
        }
        th {
          background-color: #f8f9fb;
        }
        /* 控制左边固定的核心代码 */
        td:nth-child(1),
        th:nth-child(1) {
          position: sticky;
          left: 0; /* 首行在左 */
          z-index: 1;
          background-color: #f8f9fb;
        }
        td:nth-child(2),
        th:nth-child(2) {
          position: sticky;
          left: 65px;
          z-index: 1;
          background-color: #f8f9fb;
        }
        /* 控制表头固定的核心代码 */
        thead tr th {
          position: sticky;
          top: 0; /* 第一列最上 */
        }
        th:nth-child(1),
        th:nth-child(2){
          z-index: 2;
          background-color: #f8f9fb;
        }
        .diagonal {
          position: relative;
        }
        .diagonal::after {
          content: "";
          position: absolute;
          left: 50%;
          bottom: 50%;
          border-top: 1px solid #d9d9d9;
          width: 110%;
          transform: translateX(-50%) rotate(-150deg);
        }
      }
      .staticTable{
        overflow: auto;
        height: 200px;
        border: 1px solid #d9d9d9;
        border-bottom: 0;
        border-right: 0;
        margin: 10px;
        table {
          border-collapse: separate;
          table-layout: fixed;
          width: 100%;
          color: #595959;
        }
        td, th {
          border-right: 1px solid #d9d9d9;
          border-bottom: 1px solid #d9d9d9;
          box-sizing: border-box;
          width: 100px;
          height: 20px;
          text-align: center;
        }
        th {
          background-color: #f8f9fb;
        }
        /* 控制表头固定的核心代码 */
        thead tr th {
          position: sticky;
          top: 0; /* 第一列最上 */
        }
        th:nth-child(1),
        th:nth-child(2){
          z-index: 2;
          background-color: #f8f9fb;
        }
      }
    }
  }
  .source{
    text-align: center;
    padding: 5px 0;
    color: #8C8C8C;
    .name{
      margin-bottom: 5px;
    }
  }
  .dialog-title {
    text-align: center;
    padding: 20px 0;
    font-size: 16px;
    font-weight: 500;
    color: #000000;
  }
  .dialog-content {
    padding: 0 20px 20px 20px;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
  }
  :deep(.van-dialog__content) {
    min-height: 118px;
    max-height: 293px;
    overflow-y: scroll;
  }
}
</style>